<template>
  <div class="main">
    <el-row
      class="content"
      :gutter="10"
      style="margin: 0; padding-bottom: 8px"
      v-if="zfNameflag"
    >
      <el-col :span="8" class="content-left">
        <el-col class="box">
          <div class="title">
            <p>全国产业链概览</p>
          </div>
          <div class="content-body">
            <el-row>
              <el-col>
                <div
                  style="
                    width: 100%;
                    height: 327px;
                    float: left;
                    position: relative;
                  "
                >
                  <div class="over">
                    <span>选择产业链节点</span>
                    <div class="overview" v-show="show && options1.length">
                      <el-tree
                        :data="options1"
                        show-checkbox
                        ref="res"
                        node-key="label"
                        :props="defaultProps"
                        accordion
                        @check-change="handleNodeClick"
                      >
                      </el-tree>
                    </div>
                    <div
                      class="el-input__innern xiaobox"
                      @click.stop="handleSelect"
                    >
                      <span v-for="(item, index) in inputarr" :key="index">{{
                        item.name
                      }}</span>
                      <i
                        :class="
                          this.show ? 'el-icon-arrow-down' : 'el-icon-arrow-up'
                        "
                        class="right"
                        slot="suffix"
                        @click.stop="handleIconClick"
                      >
                      </i>
                    </div>
                    <i class="el-icon-refresh-right" @click="refresh"></i>
                  </div>
                  <div
                    id="overviewname"
                    style="
                      width: 100%;
                      height: 100%;
                      z-index: 100;
                      overflow: hidden;
                    "
                  ></div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col class="box">
          <div class="title">
            <p>企业数量按核心产品分布</p>
          </div>
          <div class="content-body" style="padding: 5px 15px">
            <div id="tableColor">
              <div style="height: 40px    line-height: 40px;" class="over1">
                <span> 选择地区/园区</span>

                <el-cascader
                  :options="options"
                  :props="props1"
                  @change="cascader1"
                  clearable
                ></el-cascader>
              </div>
              <div style="height: 287px" id="overRegion"></div>
            </div>
          </div>
        </el-col>
      </el-col>
      <el-col
        :span="8"
        class="content-center"
        style="
          background-color: (255, 255, 255, 0.5);
          margin-top: 50px;
          position: relative;
        "
      >
        <p
          style="
            color: rgb(0, 228, 255);
            position: absolute;
            right: 10px;
            bottom: 10px;
          "
        >
          产业链相关数据来源：产业链一键通
        </p>
        <div id="listmap" style="width: 100%; height: 720px"></div>
        <div style="position: absolute; top: 10px; color: #ffffff">
          <span @click="quanguo" :class="age === 0 ? 'active' : ''">
            {{ name1 ? "全国>" : "全国" }}</span
          >
          <span
            @click="last_child"
            v-show="name1"
            :class="age === 1 ? 'active' : ''"
          >
            {{ name2 ? name1 + ">" : name1 }}</span
          >
          <span v-show="name2" :class="age === 2 ? 'active' : ''">
            {{ name2 }}</span
          >
        </div>
      </el-col>
      <el-col
        :span="8"
        class="content-center"
        style="background-color: (255, 255, 255, 0.5)"
      >
        <el-row>
          <el-col class="box">
            <div class="title">
              <p>企业数量按产业链节点分布</p>
            </div>
            <div class="content-body">
              <div id="dangerType_box" style="width: 100%; height: 327px"></div>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col class="box">
            <div class="title">
              <p>企业数量按地区分布</p>
            </div>
            <div class="content-body">
              <div id="_loading" style="width: 100%; height: 327px"></div>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import dd from 'gdt-jsapi'
import cityMap from '../../js/china-main-city-map'
import govheader from '@/components/govheader2'
import govnavigation from '@/components/govnavigation2'
import 'echarts-gl'
const echarts = require('echarts')
export default {
  name: 'zfDangerousGoods',
  components: { govheader, govnavigation },
  data () {
    return {
      zfNameflag: true,
      state: '',
      parkCode: '310000',
      parkInfo: {
        parkName: '',
        entQty: '0',
        address: '',
        primeMoverIndustry: '',
        parkMainIncome: '0'
      },
      props: { multiple: true },
      props1: { checkStrictly: true },
      nodeCode1: [],
      nodeCode2: '',
      options: [],
      options1: [],
      productListData: [],
      value1: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      myChart1: '',
      myChart2: '',
      myChart3: '',
      myChart4: '',
      myChart5: '',
      myChart6: '',
      option1: '',
      option2: '',
      option3: '',
      option4: '',
      option5: '',
      option6: '',
      name1: '',
      name2: '',
      areaCode: '',
      overData: [],
      overName: [],
      option6Data: [],
      get_loadingdata1: [],
      get_loadingdata2: [],
      get_loadingdata3: [],
      listmapData: '',
      age: 0,
      value: '',
      lastage: '',
      show: false,
      myChart1yList: [],
      myChart1yList1: [],
      parentNode: '',
      myChart1xData: [],
      option4series1: [],
      option4series1min: [],
      option4series1max: [],
      option4series: [],
      option4series2: [],
      option6XData: [
        '石油煤炭及其他燃料加工业',
        ' 化学原料和化学制品制造业',
        '化学药品原料药制造',
        '橡胶制品业'
      ],
      cityId: 100000,
      input: '请输入',
      option6minData: [],
      option6maxData: [],
      myChart1setInterval: null,
      myChart1rval: null,
      myChart6setInterval: null,
      myChart6val: null,
      myChart3setInterval: null,
      myChart3val: null,
      myChart2setInterval: null,
      myChart2val: null,
      handleNodeClickdata: '',
      myChar4tsetInterval: '',
      myChart4val: null,
      inputarr: [],
      administrativeSelector: [],
      userid: '全国',
      useridname: ''
    }
  },
  created () {
    if (window.SITE_CONFIG['sitURL'] === 'https://www.plantmate.com/api') {
      dd.getAuthCode({})
        .then((res) => {
          if (res) {
            let params = {
              applicationFlag: '20',
              authCode: res.auth_code
            }

            this.$http
              .post(`/home/sys/loginfree/authentication`, params)
              .then(({ data: res }) => {
                console.log('res2:', res)
                localStorage.setItem('buriedPointInformation',JSON.stringify(res.data))
                this.$store.commit('zfName', res.data.lastName)
                if (res.code !== 0) {
                  this.zfNameflag = false
                }
              })
              .catch(() => {
                this.zfNameflag = false
              })
          }
        })
        .catch(() => {
          this.zfNameflag = false
        })
    }
  },
  mounted () {
    let _this = this
    _this.mapCoord('')
    _this.get_loadingdata(_this.cityId)
    _this.dangerType_boxdata(_this.cityId)
    _this.mapCoordinate('')
    this.overviewnamedata(_this.cityId)
    this.overRegionData(_this.cityId)
    this.$http
      .post(`/home/government/IndustrialChainMap/chainSelector`, {})
      .then(({ data: res }) => {
        // 产业链地图-产业链节点选择器
        _this.options1 = _this.options11(res.data)
      })
      .catch(() => {})

    this.$http
      .post(`/home/government/IndustrialChainMap/cityParkSelector`, {})
      .then(({ data: res }) => {
        // 产业链地图-浙江省园区选择器
        _this.options = _this.options12(res.data)
      })
      .catch(() => {})
    this.$nextTick(() => {
      clearInterval(this.myChart1val)
      clearInterval(this.myChart3val)
      clearInterval(this.myChart2val)
      clearInterval(this.myChart6val)
    })
  },

  computed: {},

  methods: {
    handleSelect () {
      this.show = true
    },
    handleIconClick () {
      this.show = !this.show
    },
    setclearInterval () {
      clearInterval(this.myChart1setInterval)
      clearInterval(this.myChart6setInterval)
      clearInterval(this.myChart3setInterval)
      clearInterval(this.myChar4tsetInterval)

      clearInterval(this.myChart1val)
      clearInterval(this.myChart6val)
      clearInterval(this.myChart3val)
    },
    zfNameflagChange (val) {
      this.zfNameflag = val
    },
    getoverviewname () {
      let _this = this
      if (
        this.myChart1 !== '' &&
        this.myChart1 !== null &&
        this.myChart1 !== undefined
      ) {
        this.myChart1.dispose()
      }
      if (
        this.myChart1val !== '' &&
        this.myChart1val !== null &&
        this.myChart1val !== undefined
      ) {
        clearInterval(this.myChart1val)
      }
      _this.myChart1 = echarts.init(document.getElementById('overviewname'))
      let barWidth = 500 / 20
      this.option1 = {
        tooltip: {
          trigger: 'axis',
          // formatter: '{b} : {c}',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          },
          extraCssText: 'z-index: 9',
          backgroundColor: 'transparent',
          borderWidth: 0,
          padding: 0,
          textStyle: {
            color: '#00E4FF'
          },

          formatter: function (res) {
            let str = `<div style="position: relative;background-color:#ffffff;padding:5px">`

            str +=
              '<div style="color:#909399;text-align: center;font-weight: 600">' +
              res[0].axisValue +
              '</div>' +
              '<div style="color:#909399;font-size:12px;"><span style="display:inline-block;width:100px;"> <div style="width: 10px;height: 10px;border-radius: 50%; background: ' +
              res[0].color +
              '; margin-right: 5px;display: inline-block;"></div>' +
              res[0].seriesName +
              '</span><span style="display:inline-block;color:#303133">' +
              res[0].data +
              '</span></div>' +
              '<div style="color:#909399;font-size:12px;"><span style="display:inline-block;width:100px;">  <div style="width: 10px;height: 10px;border-radius: 50%; background: ' +
              res[3].color +
              '; margin-right: 5px;display: inline-block;"></div>' +
              res[3].seriesName +
              '(' +
              res[3].data +
              ')' +
              '</span><span style="display:inline-block;color:#303133">' +
              '</span></div>' +
              `</div>`
            return str
          }
        },
        /** 区域位置 */
        grid: {
          left: '10%',
          right: '10%',
          top: '15%',
          bottom: '18%'
        },
        // X轴
        xAxis: {
          data: _this.myChart1xData,
          type: 'category',
          axisLine: {
            show: false,
            lineStyle: {
              color: 'rgba(255,255,255,1)'
            }
            // symbol: ['none', 'arrow'],
            // symbolOffset: [0, 5]
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            // margin: 15,
            interval: 0
          }
        },
        legend: {
          // show: false,
          // right: 10,
          top: 5,
          textStyle: {
            color: '#fff'
          }
          // itemWidth: 12,
          // itemHeight: 10
          // itemGap: 35
        },
        yAxis: [
          {
            name: '关联企业数量',
            show: true,
            nameTextStyle: {
              color: '#ffffff'
            },
            splitNumber: 4,
            axisLine: {
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                // type: 'dashed',
                // color: '#075858'
              }
            },
            axisLabel: {
              color: '#FFFFFF'
            }
          },
          {
            name: '营收(亿元)',
            show: true,
            nameTextStyle: {
              color: '#ffffff'
            },
            splitNumber: 4,
            axisLine: {
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                // type: 'dashed',
                // color: '#075858'
              }
            },
            axisLabel: {
              color: '#FFFFFF'
            }
          }
        ],
        dataZoom: [
          {
            type: 'inside',
            startValue: 0,
            endValue: 4,
            xAxisIndex: [0],
            zoomLock: true
          }
        ],
        series: [
          {
            name: '关联企业数',
            type: 'bar',

            barWidth: barWidth,
            itemStyle: {
              normal: {
                color: 'rgba(0,241,233, 1)'
              }
            },
            label: {
              show: false,
              position: [barWidth / 2, -(barWidth + 20)],
              color: '#ffffff',
              fontSize: 14,
              fontStyle: 'bold',
              align: 'center'
            },
            data: _this.myChart1yList
          },
          {
            z: 2,

            type: 'pictorialBar',
            data: _this.myChart1yList,
            symbol: 'diamond',
            symbolOffset: [0, '50%'],
            symbolSize: [barWidth, barWidth * 0.5],
            itemStyle: {
              normal: {
                color: 'rgba(0,241,233, 1)'
              }
            }
          },
          {
            z: 3,
            type: 'pictorialBar',
            symbolPosition: 'end',
            data: _this.myChart1yList,
            symbol: 'diamond',
            symbolOffset: [0, '-50%'],
            symbolSize: [barWidth, barWidth * 0.5],
            itemStyle: {
              normal: {
                borderWidth: 0,
                color: 'rgba(0,241,233, 1)'
              }
            }
          },
          {
            name: '营收',
            type: 'line',
            yAxisIndex: 1,
            barWidth: barWidth,
            itemStyle: {
              normal: {
                color: '#FF9727'
              }
            },
            label: {
              show: false,
              position: [barWidth / 2, -(barWidth + 20)],
              color: '#ffffff',
              fontSize: 14,
              fontStyle: 'bold',
              align: 'center'
            },
            data: _this.myChart1yList1
          }
        ]
      }
      this.myChart1.setOption(this.option1)

      this.autoPlay(this.myChart1, this.option1, 'myChart1setInterval')
      let num1 = 0
      let num2 = 4
      this.myChart1val = setInterval(() => {
        if (
          this.option1.dataZoom[0].startValue + 1 ===
          this.option1.series[0].data.length
        ) {
          num1 = 0
          num2 = 4
          this.option1.dataZoom[0].startValue = num1
          this.option1.dataZoom[0].endValue = num2
        } else {
          this.option1.dataZoom[0].startValue = num1 += 1
          this.option1.dataZoom[0].endValue = num2 += 1
        }
        this.myChart1.setOption(this.option1)
      }, 5000)
    },
    get_loading () {
      var _this = this
      if (
        this.myChart3 !== '' &&
        this.myChart3 !== null &&
        this.myChart3 !== undefined
      ) {
        this.myChart3.dispose()
      }
      if (
        this.myChart3val !== '' &&
        this.myChart3val !== null &&
        this.myChart3val !== undefined
      ) {
        clearInterval(this.myChart3val)
      }
      _this.myChart3 = echarts.init(document.getElementById('_loading'))
      this.option3 = {
        animationDuration: 5000,

        tooltip: {
          trigger: 'axis',
          // formatter: '{b} : {c}',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          },
          extraCssText: 'z-index: 9',
          backgroundColor: 'transparent',
          borderWidth: 0,
          padding: 0,
          textStyle: {
            color: '#00E4FF'
          },

          formatter: function (res) {
            let str = `<div style="position: relative;background-color:#ffffff;padding:5px">`

            str +=
              '<div style="color:#909399;text-align: center;font-weight: 600">' +
              res[0].axisValue +
              '</div>' +
              '<div style="color:#909399;font-size:12px;"><span style="display:inline-block;width:100px;"> <div style="width: 10px;height: 10px;border-radius: 50%; background: ' +
              'linear-gradient(to right,' +
              res[0].color.colorStops[0].color +
              ', ' +
              res[0].color.colorStops[1].color +
              ');+' +
              '; margin-right: 5px;display: inline-block;"></div>' +
              res[0].seriesName +
              '</span><span style="display:inline-block;color:#303133">' +
              res[0].data +
              '</span></div>' +
              `</div>`
            return str
          }
        },
        // color: ["#13B9FB"],
        grid: {
          left: '5%',
          right: '10%',
          top: '10%',
          bottom: '5%',
          containLabel: true
        },
        dataZoom: [
          {
            type: 'inside',
            startValue: 0,
            endValue: 5,
            yAxisIndex: [0],
            zoomLock: true
          }
        ],
        xAxis: {
          type: 'value',
          name: '',
          axisLine: {
            // 这是y轴文字颜色
            lineStyle: {
              color: '#BFF7FF'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,0.3)'
            }
          },

          axisTick: {
            show: false
          }
        },

        yAxis: [
          {
            type: 'category',
            data: _this.get_loadingdata1,
            axisLine: {
              show: false,
              lineStyle: {
                color: '#BFF7FF'
              }
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          }
        ],
        series: [
          {
            name: '企业数',
            type: 'bar',
            label: {
              show: true,
              position: 'right',
              color: '#ffffff',

              formatter: function (params) {
                return (
                  params.data + ',  ' + _this.get_loadingdata3[params.dataIndex]
                )
              }
            },
            barWidth: 10,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                { offset: 0, color: '#0570E9' },
                { offset: 1, color: '#0ECFF8' }
              ]),
              barBorderRadius: [20, 20, 20, 20]
            },

            data: _this.get_loadingdata2
          }
        ]
      }
      this.myChart3.setOption(this.option3)
      this.autoPlay(this.myChart3, this.option3, 'myChart3setInterval')
      let num1 = 0
      let num2 = 5
      this.myChart3val = setInterval(() => {
        if (
          this.option3.dataZoom[0].startValue + 1 ===
          this.option3.series[0].data.length
        ) {
          num1 = 0
          num2 = 5
          this.option3.dataZoom[0].startValue = num1
          this.option3.dataZoom[0].endValue = num2
        } else {
          this.option3.dataZoom[0].startValue = num1 += 1
          this.option3.dataZoom[0].endValue = num2 += 1
        }
        this.myChart3.setOption(this.option3)
      }, 5000)
    },
    get_loadingdata (str) {
      var that = this
      this.$http
        .post(`/home/government/IndustrialChainMap/areaEntQty`, {
          params: str,
          areaCode: that.areaCode
        })
        .then(({ data: res }) => {
          that.get_loadingdata1 = res.data.name
          res.data.value = res.data.value.map((i) => {
            var arr = i.split(',')
            this.get_loadingdata3.push(arr[1])
            return Number(arr[0])
          })
          that.get_loadingdata2 = res.data.value
          that.get_loading()
        })
        .catch(() => {})
    },

    getoverRegion () {
      var _this = this
      if (
        this.myChart2 !== '' &&
        this.myChart2 !== null &&
        this.myChart2 !== undefined
      ) {
        this.myChart2.dispose()
      }
      if (
        this.myChart2val !== '' &&
        this.myChart2val !== null &&
        this.myChart2val !== undefined
      ) {
        clearInterval(this.myChart2val)
      }
      _this.myChart2 = echarts.init(document.getElementById('overRegion'))
      this.option2 = {
        animationDuration: 2000,
        tooltip: {
          trigger: 'axis',
          confine: true
        },
        title: {
          text: '单位（家）',

          textStyle: {
            color: '#ffffff',

            fontSize: 12
          },

          right: '-5',
          top: '0'
        },
        // color: ["#13B9FB"],
        grid: {
          left: '3%',
          right: '6%',
          top: '10%',
          bottom: '5%',
          containLabel: true
        },

        xAxis: {
          type: 'value',

          axisLine: {
            // 这是y轴文字颜色
            lineStyle: {
              color: '#BFF7FF'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,0.3)'
            }
          },
          axisTick: {
            show: false
          }
        },
        dataZoom: [
          {
            type: 'inside',
            startValue: 0,
            endValue: 5,
            yAxisIndex: [0],
            zoomLock: true
          }
        ],
        yAxis: [
          {
            type: 'category',

            data: _this.overName,

            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#BFF7FF'
              }
            }
          }
        ],
        series: [
          {
            name: '企业数',
            type: 'bar',
            barWidth: 15,
            label: {
              show: true,
              position: 'right',
              color: '#ffffff'
            },

            itemStyle: {
              color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                { offset: 0, color: '#32D5A5' },
                { offset: 1, color: 'rgba(2, 198, 255, 0)' }
              ])
            },

            data: _this.overData
          }
        ]
      }
      this.myChart2.setOption(this.option2)

      let num1 = 0
      let num2 = 5
      this.myChart2val = setInterval(() => {
        if (
          this.option2.dataZoom[0].startValue + 1 ===
          this.option2.series[0].data.length
        ) {
          num1 = 0
          num2 = 5
          this.option2.dataZoom[0].startValue = num1
          this.option2.dataZoom[0].endValue = num2
        } else {
          this.option2.dataZoom[0].startValue = num1 += 1
          this.option2.dataZoom[0].endValue = num2 += 1
        }
        this.myChart2.setOption(this.option2)
      }, 5000)
      this.autoPlay(this.myChart2, this.option2, 'myChart2setInterval')
    },
    getdangerType_box () {
      var _this = this
      if (
        this.myChart6 !== '' &&
        this.myChart6 !== null &&
        this.myChart6 !== undefined
      ) {
        this.myChart6.dispose()
      }
      if (
        this.myChart6val !== '' &&
        this.myChart6val !== null &&
        this.myChart6val !== undefined
      ) {
        clearInterval(this.myChart6val)
      }
      // const dangerType_box = document.getElementById('dangerType_box')
      _this.myChart6 = echarts.init(document.getElementById('dangerType_box'))
      this.option6 = {
        // backgroundColor: '#323a5e',
        animationDuration: 5000,
        title: {
          text: '单位（家）',

          textStyle: {
            color: '#ffffff',

            fontSize: 12
          },

          right: '-5',
          top: '15'
        },
        tooltip: {
          trigger: 'axis',
          // formatter: '{b} : {c}',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          },
          extraCssText: 'z-index: 9',
          backgroundColor: 'transparent',
          borderWidth: 0,
          padding: 0,
          textStyle: {
            color: '#00E4FF'
          },

          formatter: function (res) {
            let str = `<div style="position: relative;background-color:#ffffff;padding:5px">`

            if (res[1]) {
              str +=
                '<div style="color:#909399;text-align: center;font-weight: 600">' +
                res[0].axisValue +
                '</div>' +
                '<div style="color:#909399;font-size:12px;"><span style="display:inline-block;width:100px;"> <div style="width: 10px;height: 10px;border-radius: 50%; background: ' +
                'linear-gradient(to right,' +
                res[0].color.colorStops[0].color +
                ', ' +
                res[0].color.colorStops[1].color +
                ');+' +
                '; margin-right: 5px;display: inline-block;"></div>' +
                res[0].seriesName +
                '</span><span style="display:inline-block;color:#303133">' +
                res[0].data +
                '</span></div>' +
                '<div style="color:#909399;font-size:12px;"><span style="display:inline-block;width:100px;">  <div style="width: 10px;height: 10px;border-radius: 50%; background: ' +
                'linear-gradient(to right,' +
                res[1].color.colorStops[0].color +
                ', ' +
                res[1].color.colorStops[1].color +
                ');+' +
                '; margin-right: 5px;display: inline-block;"></div>' +
                res[1].seriesName +
                '</span><span style="display:inline-block;color:#303133">' +
                res[1].data +
                ',' +
                _this.option6Data[res[1].dataIndex] +
                '</span></div>' +
                `</div>`
              return str
            } else {
              str +=
                '<div style="color:#909399;text-align: center;font-weight: 600">' +
                res[0].axisValue +
                '</div>' +
                '<div style="color:#909399;font-size:12px;"><span style="display:inline-block;width:100px;"> <div style="width: 10px;height: 10px;border-radius: 50%; background: ' +
                'linear-gradient(to right,' +
                res[0].color.colorStops[0].color +
                ', ' +
                res[0].color.colorStops[1].color +
                ');+' +
                '; margin-right: 5px;display: inline-block;"></div>' +
                res[0].seriesName +
                '</span><span style="display:inline-block;color:#303133">' +
                res[0].data +
                '</span></div>' +
                `</div>`
              return str
            }
          }
        },
        dataZoom: [
          {
            type: 'inside',
            startValue: 0,
            endValue: 5,
            yAxisIndex: [0],
            zoomLock: true,
            realtime: true // 拖动时，是否实时更新系列的视图
            // start: 5, // 伸缩条开始位置（1-100），可以随时更改
            // end: 80 // 伸缩条结束位置（1-100），可以随时更改
          }
        ],
        grid: {
          left: '2%',
          right: '5%',
          bottom: '14%',
          top: '16%',
          containLabel: true
        },
        legend: {
          // show: false,
          // right: 10,
          // top: 12,
          textStyle: {
            color: '#fff'
          }
          // itemWidth: 12,
          // itemHeight: 10
          // itemGap: 35
        },
        yAxis: [
          {
            type: 'category',
            data: this.option6XData,
            axisLine: {
              show: false,
              lineStyle: {
                color: 'white'
              }
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },

            axisLabel: {
              // 坐标轴刻度标签的相关设置。
              interval: 0,
              formatter: function (params) {
                var newParamsName = '' // 最终拼接成的字符串
                var paramsNameNumber = params.length // 实际标签的个数
                var provideNumber = 6 // 每行能显示的字的个数
                var rowNumber = Math.ceil(paramsNameNumber / provideNumber) // 换行的话，需要显示几行，向上取整
                /**
                 * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
                 */
                // 条件等同于rowNumber>1
                if (paramsNameNumber > provideNumber) {
                  /** 循环每一行,p表示行 */
                  for (var p = 0; p < rowNumber; p++) {
                    var tempStr = '' // 表示每一次截取的字符串
                    var start = p * provideNumber // 开始截取的位置
                    var end = start + provideNumber // 结束截取的位置
                    // 此处特殊处理最后一行的索引值
                    if (p === rowNumber - 1) {
                      // 最后一次不换行
                      tempStr = params.substring(start, paramsNameNumber)
                    } else {
                      // 每一次拼接字符串并换行
                      tempStr = params.substring(start, end) + '\n'
                    }
                    newParamsName += tempStr // 最终拼成的字符串
                  }
                } else {
                  // 将旧标签的值赋给新标签
                  newParamsName = params
                }
                // 将最终的字符串返回
                return newParamsName
              }
            }
          }
        ],

        xAxis: {
          type: 'value',

          axisLine: {
            show: false,
            lineStyle: {
              color: 'white'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,0.3)'
            }
          },

          axisTick: {
            show: false
          }
        },

        series: [
          {
            name: this.userid,
            type: 'bar',
            barWidth: 15,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                { offset: 0, color: 'rgba(2, 198, 255, 1)' },
                { offset: 1, color: 'rgba(2, 198, 255, 0)' }
              ])
            },
            data: this.option6minData
          },
          {
            name: this.option6maxData.length ? '浙江' : '',
            type: 'bar',
            barWidth: 15,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                { offset: 0, color: 'rgba(0,241,233, 1)' },
                { offset: 1, color: 'rgba(0,241,233, 0)' }
              ])
            },

            data: this.option6maxData
          }
        ]
      }
      this.myChart6.setOption(this.option6)
      this.myChart6.on('scroll', function (param) {
        console.log(param)
      })
      this.autoPlay(this.myChart6, this.option6, 'myChart6setInterval')
      let num1 = 0
      let num2 = 5
      this.myChart6val = setInterval(() => {
        if (
          this.option6.dataZoom[0].startValue + 1 ===
          this.option6.series[0].data.length
        ) {
          num1 = 0
          num2 = 5
          this.option6.dataZoom[0].startValue = num1
          this.option6.dataZoom[0].endValue = num2
        } else {
          this.option6.dataZoom[0].startValue = num1 += 1
          this.option6.dataZoom[0].endValue = num2 += 1
        }
        this.myChart6.setOption(this.option6)
      }, 5000)
    },
    dangerType_boxdata (str) {
      this.option6maxData = []
      this.option6minData = []
      var that = this
      this.$http
        .post(`/home/government/IndustrialChainMap/chainEntQty`, {
          params: str,
          areaCode: that.areaCode
        })
        .then(({ data: res }) => {
          let { name, entQty, zjValue } = res.data
          this.option6XData = name

          if (zjValue) {
            zjValue = zjValue.map((res) => {
              var arr = res.split(',')

              this.option6Data.push(arr[1])
              return Number(arr[0])
            })
            this.option6maxData = zjValue
          }
          this.option6minData = entQty

          that.getdangerType_box()
        })
    },
    renderMyChart (name) {
      let _this = this
      if (
        this.myChart4 !== '' &&
        this.myChart4 !== null &&
        this.myChart4 !== undefined
      ) {
        this.myChart4.dispose()
      }
      if (
        this.myChar4tsetInterval !== '' &&
        this.myChar4tsetInterval !== null &&
        this.myChar4tsetInterval !== undefined
      ) {
        clearInterval(this.myChar4tsetInterval)
      }
      this.myChart4 = echarts.init(document.getElementById('listmap'))

      if (this.cityId == 100000) {
        var scatterData = _this.option4series1.map((i) => {
          var arr = []
          // entQty: 31
          // lat: 27.304095
          // lng: 105.311581
          arr.push(i.lng)
          arr.push(i.lat)
          arr.push(i.entQty)
          return arr
        })
        this.option4 = {
          visualMap: {
            show: true,
            // max: 1,
            // min: _this.option4series1min,
            // max: _this.option4series1max,
            splitNumber: 4,
            type: 'continuous',
            // type: 'piecewise',

            // 50 120 500
            orient: 'vertical',
            opacity: 1,
            // inRange: {
            //   symbol: 'circle',
            //   // color: ['#f1ea29', '#f1b629', '#ff8400', '#ff2a00'],
            //   // color: ['red', 'yellow', 'blue'],
            //   color: ['#67C23A', 'yellow', '#E6A23C', 'red']
            // },
            text: ['高', '低'], // 两端的文本
            textStyle: {
              color: '#ffffff'
            },
            itemWidth: 18,
            inRange: {
              // 渐变颜色，从小到大
              color: ['#67C23A', 'yellow', '#E6A23C', 'red']
              // color: ['#f1ea29', '#f1b629', '#ff8400', '#ff2a00']
            },
            min: 100,
            max: 690,
            // 50 120 500
            pieces: [
              { max: 100, min: 0 },
              { max: 200, min: 101 },
              { max: 600, min: 201 },
              { min: 601 }
            ]
          },
          geo: {
            map: name,
            roam: true,
            itemStyle: {
              areaColor: '#030673',
              borderColor: '#0078FF',
              borderWidth: 1
            },
            emphasis: {
              itemStyle: {
                areaColor: '#0078FF'
              },
              label: {
                show: true,
                color: '#AAECFF'
              }
            },
            label: {
              show: false,
              color: '#AAECFF'
            }
          },

          series: [
            {
              name: '',
              type: 'heatmap',
              data: scatterData,
              symbolSize: 3,
              pointSize: 5, // 每个点的大小，在地理坐标系(coordinateSystem: 'geo')上有效。

              // blurSize: '0.7' // 每个点模糊的大小，在地理坐标系(coordinateSystem: 'geo')上有效。
              coordinateSystem: 'geo', // 'cartesian2d'使用二维的直角坐标系。'geo'使用地理坐标系
              // xAxisIndex: 0, // 使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
              // yAxisIndex: 0, // 使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
              blurSize: 5, // 每个点模糊的大小，在地理坐标系(coordinateSystem: 'geo')上有效。
              minOpacity: 0.3, // 最小的透明度，在地理坐标系(coordinateSystem: 'geo')上有效。
              maxOpacity: 1, // 最大的透明度，在地理坐标系(coordinateSystem: 'geo')上有效。
              cursor: 'pointer' // 鼠标悬浮时在图形元素上时鼠标的样式是什么。同 CSS 的 cursor。
            }
          ]
        }
      } else {
        this.option4 = {
          tooltip: {
            trigger: 'item',
            extraCssText: 'z-index: 9',
            backgroundColor: null,
            borderColor: '#333',
            borderWidth: 0,
            padding: 0,
            textStyle: {
              color: '#ffffff'
            },
            formatter: function (para) {
              if (para.seriesType === 'effectScatter') {
                // console.log(para.data[3])
                if (para.data[3] !== undefined && para.data[3].length) {
                  let str =
                    `<div style="position: relative;border:1px solid #00d3e7;background-color:rgba(10, 39, 116, .5);padding:5px">
                <div style="width: 10px;height: 10px;position:absolute;border-top: 3px solid #00d3e7;border-left: 3px solid #00d3e7;left: -3px;top: -3px;"></div>
                <div style="width: 10px;height: 10px;position:absolute;border-top: 3px solid #00d3e7;border-right: 3px solid #00d3e7;right: -3px;top: -3px;"></div>
                <div style="width: 10px;height: 10px;position:absolute;border-bottom:3px solid #00d3e7;border-right: 3px solid #00d3e7;right: -3px;bottom: -3px;"></div>
                <div style="width: 10px;height: 10px;position:absolute;border-bottom:3px solid #00d3e7;border-left: 3px solid #00d3e7;left: -3px;bottom: -3px;"></div>` +
                    '<div style="color:#fcaf17;text-align: center;font-weight: 600">' +
                    para.data[2] +
                    '</div>'
                  para.data[3].map((i) => {
                    var isstr =
                      '<div style="color:#E4E4E4;font-size:12px;"><span style="display:inline-block;width:100px;">' +
                      i.name +
                      '</span><span style="display:inline-block;color:#00E4FF">' +
                      i.entCount +
                      '</span></div>'
                    str += isstr
                  })

                  return str
                } else {
                  return para.data[2]
                }
              }
            }
          },
          geo: [
            {
              map: name,
              aspectScale: 0.9,
              roam: true, // 是否允许缩放
              layoutSize: '100%',
              layoutCenter: ['50%', '45%'],
              zoom: 0.9,
              itemStyle: {
                areaColor: '#030673',
                borderColor: '#0078FF',
                borderWidth: 1
              },
              emphasis: {
                itemStyle: {
                  areaColor: '#0078FF'
                },
                label: {
                  show: true,
                  color: '#AAECFF'
                }
              },
              label: {
                show: true,
                color: '#AAECFF'
              },
              zlevel: 3
            }
          ],
          series: [
            {
              type: 'effectScatter',
              coordinateSystem: 'geo',
              geoIndex: 0,
              symbol: 'circle',
              symbolSize: 6,
              showEffectOn: 'render',
              rippleEffect: {
                brushType: 'fill',
                scale: 3
              },
              hoverAnimation: true,
              itemStyle: {
                color: 'rgb(0, 141, 221)'
              },
              label: {
                formatter: function (para) {
                  return ''
                }
                // position: 'right',
                // color: '#333333',
                // borderColor: '#005DDC',
                // borderWidth: 1,
                // borderType: 'solid',
                // padding: 5,
                // backgroundColor: 'rgba(255, 255, 255, 1)',
                // show: false
              },
              emphasis: {
                label: {
                  show: true
                },
                itemStyle: {
                  color: 'rgb(255, 155, 55)',
                  borderColor: 'rgb(255, 155, 55)',
                  borderWidth: 6
                }
              },

              data: _this.option4series1,
              zlevel: 10
            }
          ]
        }
      }

      this.myChart4.setOption(_this.option4, true)
      if (this.cityId !== 100000) {
        this.mapAutoPlay(this.myChart4, this.option4, 'myChar4tsetInterval')
      }
      this.myChart4.on('click', function (param) {
        if (param.componentType === 'geo') {
          var cityId = cityMap[param.name]
          _this.userid = param.name
          _this.cityId = cityId
          if (cityId) {
            _this.administrativeSelector.forEach((i) => {
              // console.log(param.name, i.areaName)
              if (param.name + '自治区' === i.areaName) {
                _this.username(i.areaCode, cityId, param.name)
              } else if (param.name + '维吾尔自治区' === i.areaName) {
                _this.username(i.areaCode, cityId, param.name)
              } else if (param.name + '省' === i.areaName) {
                _this.username(i.areaCode, cityId, param.name)
              } else if (param.name + '市' === i.areaName) {
                _this.username(i.areaCode, cityId, param.name)
              } else if (param.name + '特别行政区' === i.areaName) {
                _this.username(i.areaCode, cityId, param.name)
              } else if (param.name + '回族自治区' === i.areaName) {
                _this.username(i.areaCode, cityId, param.name)
              } else if (param.name === i.areaName) {
                _this.username(i.areaCode, cityId, param.name)
              } else if (param.name + '地区' === i.areaName) {
                _this.username(i.areaCode, cityId, param.name)
              } else if (param.name + '区' === i.areaName) {
                _this.username(i.areaCode, cityId, param.name)
              } else if (param.name === i.areaName) {
                _this.username(i.areaCode, cityId, param.name)
              }
            })
          }
        }
      })
    },
    mapfun (name, data) {
      if (
        this.myChart4 !== '' &&
        this.myChart4 !== null &&
        this.myChart4 !== undefined
      ) {
        this.myChart4.dispose()
      }
      this.myChart4 = echarts.init(document.getElementById('listmap'))
      var geoCoordMap = {
        乌鲁木齐: [87.68, 43.77],
        克拉玛依: [84.77, 45.59],
        石河子: [85.94, 44.27],
        吐鲁番: [89.19, 42.91],
        齐齐哈尔: [123.97, 47.33],
        托克逊: [88.63, 42.77],
        鄯善: [90.25, 42.82],
        哈密: [93.44, 42.78],
        伊吾: [94.65, 43.28],
        巴里坤: [93, 43.6],
        库尔勒: [86.06, 41.68],
        和静: [86.35, 42.31],
        和硕: [86.84, 42.23],
        博湖: [86.53, 41.95],
        尉梨: [86.24, 41.36],
        轮台: [84.25, 41.77],
        焉耆: [86.55, 42.05],
        和田: [79.94, 37.12],
        民丰: [82.63, 37.07],
        策勒: [80.78, 37.04],
        于田: [81.63, 36.86],
        洛浦: [80.17, 37.12],
        皮山: [78.29, 37.06],
        墨玉: [79.74, 37.31],
        阿克苏: [80.29, 41.15],
        温宿: [80.24, 41.29],
        拜城: [81.84, 41.82],
        库车: [82.97, 41.68],
        新和: [82.63, 41.55],
        沙雅: [82.9, 41.25],
        阿瓦提: [80.34, 40.64],
        柯平: [79.06, 40.55],
        乌什: [79.25, 41.22],
        咯什: [75.94, 39.52],
        巴楚: [78.59, 39.78],
        枷师: [76.78, 39.46],
        乐普湖: [76.67, 39.23],
        麦盖提: [77.62, 38.95],
        莎车: [77.25, 38.45],
        泽普: [77.26, 38.2],
        叶城: [77.42, 37.89],
        疏勒: [76.05, 39.41],
        英吉沙: [76.17, 38.91],
        疏附: [75.83, 39.42],
        塔什库尔干: [75.22, 75.22],
        阿图什: [76.12, 39.73],
        阿合奇: [78.42, 41.91],
        阿克陶: [75.94, 39.14],
        乌恰: [75.18, 39.7],
        昌吉: [87.31, 44.05],
        阜康: [87.94, 44.14],
        奇台: [89.52, 44.02],
        吉木萨尔: [89.14, 44],
        米泉: [87.68, 43.97],
        玛纳斯: [86.22, 44.28],
        呼图壁: [86.92, 44.18],
        木垒: [90.34, 43.8],
        博乐: [82.1, 44.93],
        精河: [82.92, 44.67],
        温泉: [81.08, 44.95],
        伊宁: [81.33, 43.91],
        尼勒克: [82.53, 43.82],
        新源: [83.27, 43.41],
        巩留: [82.23, 43.35],
        奎屯: [84.89, 44.45],
        特克斯: [81.81, 43.23],
        昭苏: [81.08, 43.15],
        霍城: [80.87, 44.07],
        察布察尔: [81.12, 43.82],
        塔城: [82.96, 46.74],
        额敏: [83.62, 46.52],
        乌苏: [84.62, 44.45],
        托里: [83.59, 45.92],
        裕民: [82.94, 46.21],
        沙湾: [85.56, 44.29],
        和布克赛尔: [85.13, 46.78],
        阿勒泰: [88.14, 47.86],
        青河: [90.37, 46.71],
        富蕴: [89.44, 47.05],
        福海: [87.51, 47.15],
        吉木乃: [85.84, 47.42],
        布尔津: [86.92, 47.7],
        哈巴河: [86.41, 48.05]
      }
      var convertData = function (data) {
        var res = []
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name]
          if (geoCoord) {
            res.push(geoCoord.concat(data[i].value))
          }
        }
        return res
      }
      var loadData = convertData([
        { name: '乌鲁木齐', value: 32112 },
        { name: '克拉玛依', value: 44412 },
        { name: '石河子', value: 25123 },
        { name: '吐鲁番', value: 45612 },
        { name: '齐齐哈尔', value: 12512 },
        { name: '托克逊', value: 12512 },
        { name: '鄯善', value: 25121 },
        { name: '哈密', value: 54425 },
        { name: '伊吾', value: 54126 },
        { name: '巴里坤', value: 5226 },
        { name: '库尔勒', value: 56247 },
        { name: '和静', value: 67227 },
        { name: '和硕', value: 35427 },
        { name: '博湖', value: 78327 },
        { name: '尉梨', value: 87628 },
        { name: '轮台', value: 87629 },
        { name: '焉耆', value: 67830 },
        { name: '和田', value: 98730 },
        { name: '民丰', value: 112331 },
        { name: '策勒', value: 113331 },
        { name: '于田', value: 132331 },
        { name: '洛浦', value: 123231 },
        { name: '皮山', value: 154132 },
        { name: '墨玉', value: 56632 },
        { name: '阿克苏', value: 23232 },
        { name: '温宿', value: 12333 },
        { name: '拜城', value: 22333 },
        { name: '库车', value: 32333 },
        { name: '新和', value: 43434 },
        { name: '沙雅', value: 54534 },
        { name: '阿瓦提', value: 64535 },
        { name: '柯平', value: 65435 },
        { name: '乌什', value: 567236 },
        { name: '咯什', value: 567336 },
        { name: '巴楚', value: 67836 },
        { name: '枷师', value: 789436 },
        { name: '乐普湖', value: 898236 },
        { name: '麦盖提', value: 678437 },
        { name: '莎车', value: 56737 },
        { name: '泽普', value: 123337 },
        { name: '叶城', value: 12337 },
        { name: '英吉沙', value: 23437 },
        { name: '疏附', value: 34538 },
        { name: '阿图什', value: 34568 },
        { name: '阿合奇', value: 12138 },
        { name: '阿克陶', value: 32138 },
        { name: '玛纳斯', value: 54139 },
        { name: '哈巴河', value: 56139 },
        { name: '布尔津', value: 67139 },
        { name: '吉木乃', value: 78139 },
        { name: '福海', value: 65440 },
        { name: '富蕴', value: 32340 },
        { name: '青河', value: 44341 },
        { name: '阿勒泰', value: 54341 },
        { name: '和布克赛尔', value: 23442 },
        { name: '裕民', value: 12343 },
        { name: '沙湾', value: 22343 }
      ])

      this.myChart4.setOption({
        tooltip: {
          trigger: 'item',
          extraCssText: 'z-index: 9',
          backgroundColor: null,
          borderColor: '#333',
          borderWidth: 0,
          padding: 0,
          textStyle: {
            color: '#ffffff'
          }
          // formatter: function (para) {
          //   console.log(para)
          // }
        },
        visualMap: {
          type: 'piecewise',
          min: 20000,
          max: 100000,
          calculable: true,
          realtime: false,
          splitNumber: 5,
          inRange: {
            color: ['#005a88', '#04a4f6', '#00943e', '#fdf40f', '#cf2d14']
          },
          right: '10%',
          bottom: '5%',
          orient: 'vertical1',
          inverse: true, // 是否反转 visualMap 组件
          textStyle: {
            color: '#fff'
          }
        },
        geo: [
          {
            // 地图
            type: 'map',
            map: name, // 地区名字，重要参数
            zoom: 0.9,
            itemStyle: {
              areaColor: '#030673',
              borderColor: '#0078FF',
              borderWidth: 1
            },
            emphasis: {
              itemStyle: {
                areaColor: '#0078FF'
              },
              label: {
                show: true,
                color: '#AAECFF'
              }
            },
            label: {
              show: false,
              color: '#AAECFF'
            },
            data: data // 数据，重要参数/
            // label: { // 标签的显示
            //   normal: { show: false },
            //   emphasis: { show: true }
            // }
          }
        ],
        series: [
          {
            // 散点分布
            roam: true,
            type: name === 'china' ? 'heatmap' : 'scatter', // 中国地图下显示热力图，省级地图下显示精确分布点
            coordinateSystem: 'geo',
            data: loadData,
            progressive: 1000,
            animation: false,
            geoIndex: 0,
            symbol: 'circle',
            symbolSize: 6,
            showEffectOn: 'render',
            rippleEffect: {
              brushType: 'fill',
              scale: 3
            },
            hoverAnimation: true,
            itemStyle: {
              color: 'rgb(0, 141, 221)'
            },
            label: {
              formatter: function (para) {
                return ''
              }
              // position: 'right',
              // color: '#333333',
              // borderColor: '#005DDC',
              // borderWidth: 1,
              // borderType: 'solid',
              // padding: 5,
              // backgroundColor: 'rgba(255, 255, 255, 1)',
              // show: false
            },
            zlevel: 10,
            emphasis: {
              label: {
                show: true
              },
              itemStyle: {
                color: 'rgb(255, 155, 55)',
                borderColor: 'rgb(255, 155, 55)',
                borderWidth: 6
              }
            }
          }
        ]
      })
      this.myChart4.on('click', (params) => {
        console.log(params)
      })
    },

    quanguo () {
      var cityId = ''
      var _this = this
      _this.areaCode = ''
      this.name1 = ''
      this.name2 = ''
      _this.age = 0
      _this.userid = '全国'
      cityId = _this.cityId = '100000'
      _this.mapCoord('')
      _this.mapCoordinate('')
      _this.useridname = ''
      _this.get_loadingdata(cityId)
      _this.dangerType_boxdata(cityId)
      _this.overviewnamedata(cityId)
    },
    last_child () {
      var _this = this
      var cityId = ''
      this.name2 = ''
      _this.userid = this.name1
      _this.age = 1
      _this.areaCode = _this.useridname
      cityId = _this.cityId = _this.lastage
      _this.mapCoord(_this.useridname)
      _this.mapCoordinate(_this.useridname)
      _this.get_loadingdata(cityId)
      _this.dangerType_boxdata(cityId)
      _this.overviewnamedata(cityId)
    },
    // mapCoordinate (str) {
    //   var that = this
    //   this.$http
    //     .post(`/home/government/IndustrialChainMap/mapCoordinate`, {
    //       areaCode: str
    //     })
    //     .then(({ data: res }) => {
    //       that.option4series1 = res.data.map((res) => {
    //         const { lat, lng, name, parkCode, areaCode } = res
    //         let list = []
    //         list.push(lng)
    //         list.push(lat)
    //         list.push(name)
    //         if (parkCode && areaCode) {
    //           list.push(parkCode)
    //           list.push(areaCode)
    //         }
    //         return list
    //       })
    //       that.option4series = res.data.map((res) => {
    //         const { parkCode, areaCode } = res
    //         let list = []
    //         if (parkCode && areaCode) {
    //           list.push(parkCode)
    //           list.push(areaCode)
    //         }
    //         return list
    //       })

    //       that.$nextTick(() => {
    //         let name = require('../../json/' + that.cityId + '.json')
    //         echarts.registerMap('name', name)
    //         that.renderMyChart('name')
    //       })
    //     })
    // },
    mapCoordinate (str) {
      var that = this
      this.$http
        .post(`/home/government/IndustrialChainMap/mapCoordinate`, {
          areaCode: str
        })
        .then(({ data: res }) => {
          // console.log(res.data)
          if (that.cityId == 100000) {
            that.option4series1 = res.data
            var arr = res.data.map((i) => {
              return Number(i.entQty)
            })
            arr.sort((a, b) => {
              return a - b
            })
            that.option4series1min = arr[0]
            that.option4series1max = arr[arr.length - 1]
          } else {
            that.option4series1 = res.data.map((i) => {
              const {
                // eslint-disable-next-line camelcase
                name,
                lng,
                lat,
                innerVoList
              } = i
              let list = []

              list.push(lng)
              list.push(lat)
              // eslint-disable-next-line camelcase
              if (name) {
                list.push(name)
              } else {
                list.push('')
              }
              if (innerVoList) {
                list.push(innerVoList)
              }
              return list
            })
            console.log(that.option4series1)
          }

          function getRandomIntInclusive (min, max) {
            min = Math.ceil(min)
            max = Math.floor(max)
            return Math.floor(Math.random() * (max - min + 1)) + min // 含最大值，含最小值
          }
          // eslint-disable-next-line no-redeclare
          var arr = []
          for (var i = 0; i < res.data.length; i++) {
            var num = getRandomIntInclusive(23, 500)
            num = parseInt(num, 10)
            arr.push(num)
          }

          that.option4series = res.data.map((res, index) => {
            const { lat, lng, name, parkCode, areaCode } = res
            let list = []
            list.push(lng)
            list.push(lat)
            list.push(name)
            let obj = {}
            obj.name = name
            obj.x = lat
            obj.y = lng
            obj.value = arr[index]
            if (parkCode && areaCode) {
              list.push(parkCode)
              list.push(areaCode)
              obj.areaCode = areaCode
              obj.parkCode = parkCode
            }
            return obj
          })

          that.$nextTick(() => {
            let name = require('../../json/' + that.cityId + '.json')
            let data = []
            name.features.forEach((item) => {
              data.push({
                name: item.properties.name
              })
            })
            echarts.registerMap('name', name)
            that.renderMyChart('name')
            // that.mapfun('name', data)
          })
        })
    },
    mapCoord (str) {
      var _this = this
      this.$http
        .post(`/home/government/IndustrialChainMap/administrativeSelector`, {
          cityCode: str
        })
        .then(({ data: res }) => {
          _this.administrativeSelector = res.data
        })
        .catch(() => {})
    },
    mapCoordinatePark (parkCode, areaCode) {
      var that = this
      this.$http
        .post(`/home/government/IndustrialChainMap/mapCoordinatePark`, {
          parkCode: parkCode,
          areaCode: areaCode
        })
        .then(({ data: res }) => {
          that.option4series2 = res.data
        })
    },
    options11 (res) {
      return res.map((i) => {
        i.value = i.industryNodeId
        i.label = i.name

        if (i.children) {
          this.options11(i.children)
        }
        return i
      })
    },
    options12 (res) {
      return res.map((i) => {
        i.label = i.nodeName
        i.value = i.nodeCode
        if (i.children) {
          this.options12(i.children)
        }
        return i
      })
    },
    overviewnamedata (str) {
      var that = this
      this.$http
        .post(`/home/government/IndustrialChainMap/entAndQtyRevenue`, {
          params: str,
          nodeCode: that.nodeCode1,
          areaCode: that.areaCode
        })
        .then(({ data: res }) => {
          const { entQty, name, revenue } = res.data
          // console.log(entQty, name, revenue)
          that.myChart1yList = entQty
          that.myChart1yList1 = revenue
          that.myChart1xData = name
          that.getoverviewname()
        })
        .catch(() => {})
    },
    cascader (res) {
      var that = this
      let arr = res.map((i) => {
        return i[i.length - 1]
      })
      that.nodeCode1 = arr
      this.overviewnamedata(that.cityId)
    },
    cascader1 (res) {
      var that = this
      var str = ''
      if (res.length === 1) {
        str = res[0]
        that.nodeCode2 = str
        that.parentNode = ''
      } else if (res.length === 0) {
        that.nodeCode2 = ''
        that.parentNode = ''
      } else {
        str = res[res.length - 1]
        // eslint-disable-next-line no-inner-declarations
        function parentNode (array) {
          array.forEach((element) => {
            if (element.value === str) {
              that.parentNode = element.parentNode
            }
            if (element.children) {
              parentNode(element.children)
            }
          })
        }

        parentNode(that.options)
        that.nodeCode2 = str
      }
      this.overRegionData(that.cityId)
    },
    mapAutoPlay (myChart, option, timer) {
      var _this = this
      let flag = true
      let charPiecurrentIndex = 0
      // 鼠标移动上去的时候的高亮动画
      myChart.on('mouseover', function (param) {
        if (param.componentType === 'series') {
          flag = false
          clearInterval(_this[timer])
          // 取消之前高亮图形
          myChart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: charPiecurrentIndex
          })

          charPiecurrentIndex = param.dataIndex
          //* *解决文章所述问题**// //记录上一次选中值重新进入时取消高亮
          let data = option.series[0].data[charPiecurrentIndex]
          if (data) {
            _this.parkInfo.parkName = data[2]
            _this.parkInfo.entQty = data[3]
            _this.parkInfo.address = data[4]
            _this.parkInfo.primeMoverIndustry = data[5]
            _this.parkInfo.parkMainIncome = data[6]
          }

          // 高亮当前图形
          myChart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: param.dataIndex
          })

          myChart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: param.dataIndex
          })
        }
      })

      // 图标随窗口大小缩放
      window.addEventListener('resize', function () {
        myChart.resize()
      })

      // 自动高亮显示
      var chartHover = function () {
        var dataLen = option.series[0].data.length

        // 取消之前高亮的图形
        myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })
        charPiecurrentIndex = (charPiecurrentIndex + 1) % dataLen

        let data = option.series[0].data[charPiecurrentIndex]
        _this.parkInfo.parkName = data[2]
        _this.parkInfo.entQty = data[3]
        _this.parkInfo.address = data[4]
        _this.parkInfo.primeMoverIndustry = data[5]
        _this.parkInfo.parkMainIncome = data[6]

        // 高亮当前图形
        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })
        // 显示 tooltip
        myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })
      }

      // 高亮当前图形
      myChart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: 0
      })

      _this[timer] = setInterval(chartHover, 5000)
      // 4、鼠标移出之后，恢复自动高亮
      myChart.on('mouseout', function (param) {
        if (!flag) {
          _this[timer] = setInterval(chartHover, 5000)
          flag = true
        }
      })
    },
    overRegionData (str) {
      var that = this
      this.$http
        .post(`/home/government/IndustrialChainMap/coreProductsEntQty`, {
          params: str,
          nodeCode: that.nodeCode2,
          parentNode: that.parentNode
        })
        .then(({ data: res }) => {
          const { entQty, name } = res.data

          that.overData = entQty
          that.overName = name
          that.getoverRegion()
        })
        .catch(() => {})
    },
    username (areaCode, cityId, name) {
      var _this = this
      if (this.useridname) {
      } else {
        this.useridname = areaCode
      }
      this.areaCode = areaCode
      _this.get_loadingdata(cityId)
      _this.dangerType_boxdata(cityId)
      _this.overviewnamedata(cityId)
      _this.mapCoord(areaCode)
      _this.mapCoordinate(areaCode)
      if (_this.age === 0) {
        _this.name1 = name
        _this.lastage = cityId
      }
      if (_this.age === 1) {
        _this.name2 = name
      }
      _this.age++
    },
    // 饼状图自动播放
    autoPlay (myChart, option, timer) {
      var that = this
      let flag = true
      let charPiecurrentIndex = 0
      // 鼠标移动上去的时候的高亮动画
      myChart.on('mouseover', function (param) {
        flag = false
        clearInterval(that[timer])
        // 取消之前高亮图形
        myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })

        charPiecurrentIndex = param.dataIndex
        //* *解决文章所述问题**// //记录上一次选中值重新进入时取消高亮

        // 高亮当前图形
        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: param.dataIndex
        })

        myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: param.dataIndex
        })
      })

      // 图标随窗口大小缩放
      window.addEventListener('resize', function () {
        myChart.resize()
      })

      // 自动高亮显示
      var chartHover = function () {
        var dataLen = option.series[0].data.length

        // 取消之前高亮的图形
        myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })
        charPiecurrentIndex = (charPiecurrentIndex + 1) % dataLen

        // 高亮当前图形
        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })
        // 显示 tooltip
        myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })
      }

      that[timer] = setInterval(chartHover, 5000)
      // 4、鼠标移出之后，恢复自动高亮
      myChart.on('mouseout', function (param) {
        if (!flag) {
          that[timer] = setInterval(chartHover, 5000)
          flag = true
        }
      })
    },
    refresh () {
      var that = this
      this.overviewnamedata(that.cityId)
    },
    handleNodeClick (data) {
      var that = this
      var list = this.$refs.res.getCheckedNodes()
      var handleNode = []
      var handlelist = []
      function str (arr) {
        arr.forEach((i) => {
          if (i.children) {
            str(i.children)
          } else {
            handleNode.push(i.value)
            handlelist.push(i)
          }
        })
      }
      str(list)
      this.show = false
      this.inputarr = handlelist
      that.nodeCode1 = handleNode
      this.overviewnamedata(that.cityId)
    }
  },
  beforeDestroy () {
    this.setclearInterval()
    clearInterval(this.myChart2setInterval)
    clearInterval(this.myChart2val)
  }
}
</script>
<style lang="scss" scoped>
.main {
  background-size: 100% 100%;
  background: #041565;
}

.box {
  padding: 10px;
  margin-bottom: 10px;
  background-image: url("../../../../../assets/img/industry/zfIndustrialChainMa/Industrial chain overview box.png");
  background-size: 100% 100%;
}

.title {
  width: 270px;
  margin-left: 10px;
  font-weight: 700;
  font-size: 14px;
  background-image: url("../../../../../assets/img/industry/小标题背景1.png");
  background-size: 100% 100%;
  color: #ffffff;
  p {
    padding-left: 26px;
    font-size: 12px;
  }
}
.content {
  padding: 10px;
}
.content-body {
  padding: 5px;
  margin-top: 5px;
}

#tableColor,
#tableColor1,
#tableColor2,
#tableColor3,
#tableColor4 {
  width: 100%;
}
.content-body #tableColor /deep/ .statistics-warning-row,
.content-body #tableColor1 /deep/ .statistics-warning-row,
.content-body #tableColor2 /deep/ .statistics-warning-row,
.content-body #tableColor3 /deep/ .statistics-warning-row,
.content-body #tableColor4 /deep/ .statistics-warning-row {
  background-color: #d6e6ff !important;
}
//滚动条的宽度
.main ::-webkit-scrollbar {
  width: 12px;
  height: 10px;
}

//滚动条的滑块
.main ::-webkit-scrollbar-thumb {
  background-color: rgba(0, 90, 255, 0.1);
  border-radius: 5px;
}
.over {
  color: #ffffff;
  font-size: 12px;
  padding-left: 50px;
  font-weight: 400;

  overflow: hidden;
  span {
    float: left;
    margin-top: 8px;
  }
}
.active {
  cursor: pointer;
  color: #eebf43;
}

/deep/.el-cascader-panel .el-radio {
  width: 100%;
  height: 100%;
  z-index: 10;
  position: absolute;
  top: 10px;
  right: 10px;
}

/deep/.el-cascader-panel .el-radio__input {
  visibility: hidden;
}
/* 这个样式针对IE有用，不考虑IE的可以不用管*/
/deep/ .el-cascader-panel .el-cascader-node__postfix {
  top: 10px;
}
.xiaobox {
  overflow: hidden !important; //溢出隐藏
  word-break: keep-all !important; //
  white-space: nowrap !important; //文本不折行
  text-overflow: ellipsis !important; //显示省略符号来代表被修剪的文本。
  & > span {
    padding: 0px 5px;
  }
}
/deep/.el-input__innern {
  flex-wrap: nowrap !important;
  height: 30px !important;
  line-height: 30px !important;
  margin-left: 10px !important;
  border: none !important;
  background: #1f4987 !important;
  width: 250px !important;
  padding-right: 18px !important;
  color: #ffffff !important;
  position: relative !important;
  .right {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
  }
  float: left !important;
  span {
    margin-top: 0px !important;
  }
}

// /deep/.el-tag--small {
//   height: 30px !important;
//   line-height: 30px !important;
//   box-sizing: border-box !important;
//   background: transparent !important;
//   color: #ffffff !important;
// }
// /deep/.el-cascader__tags {
//   display: flex !important;
//   flex-direction: row !important;
//   flex-wrap: nowrap !important;
//   &:nth-of-type(1) {
//     width: 50% !important;
//   }
//   &:nth-of-type(2) {
//     width: 60% !important;
//     display: flex !important;
//     flex-direction: row !important;
//     flex-wrap: nowrap !important;
//     font-size: 10px !important;
//     margin-left: 5px !important;
//   }
// }

.el-icon-refresh-right {
  margin-left: 24px !important;
  float: left;
  margin-top: 8px;
}

.overview {
  height: 200px;
  //  width: 60%;
  margin: 0 auto;
  overflow-y: auto;
  position: absolute;
  top: 34px;
  left: 143px;
  z-index: 999;
  /deep/ .el-tree {
    width: 100% !important;
    padding: 10px !important;
  }
}

/deep/.el-input__suffix-inner {
  top: 0 !important;
  height: 100% !important;
}
.over1 {
  height: 40px;
  color: #ffffff;
  font-size: 12px;
  padding-left: 50px;
  font-weight: 400;
  overflow: hidden;
  .el-input__icon {
    line-height: 30px;
  }
  span {
    float: left;
    padding-top: 15px;
  }
  /deep/ .el-cascader {
    float: left;
    margin-left: 10px !important;

    .el-input__inner {
      border: none;
      background: #1f4987 !important;

      color: #ffffff !important;
    }
  }
}
</style>
